<template>
  <div class="hotel" @click="to('/pages-sub/hotel/detail/index', { id: hotel.id })">
    <div class="img">
      <image class="banner" :src="imgUrls[0]" mode="aspectFill" />
      <div class="heart">
        <wd-icon name="heart-filled" size="32rpx" color="rgba(255, 89, 64, 1)"></wd-icon>
      </div>
    </div>
    <div class="info">
      <div>
        <div class="title">{{ hotel.name }}</div>
        <div class="specs">{{ hotel.remark }}</div>
        <Reference :list="hotel.artistsList" mt="20rpx" />
      </div>
      <div class="price-box">
        <div class="score active">
          <div class="num">{{ hotel.score }}</div>
          <div class="text">{{ hotel.commentNum }}条点评</div>
        </div>
        <div class="price">{{ hotel.price }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
defineOptions({ name: 'HotelItem' })

const props = defineProps(['hotel'])
const imgUrls = ref(props.hotel.imgUrls.split(','))
</script>
<style lang="scss" scoped>
.hotel {
  box-sizing: border-box;
  display: flex;
  padding: 19rpx;
  margin-bottom: 28rpx;
  overflow: hidden;
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0px 12rpx 20rpx rgba(0, 0, 0, 0.05);
  .img {
    position: relative;
    width: 204rpx;
    height: 238rpx;
    overflow: hidden;
    border-radius: 20rpx;
    .banner {
      width: 100%;
      height: 100%;
    }
    .heart {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46rpx;
      height: 46rpx;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
    }
  }
  .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    width: 0;
    margin-left: 20rpx;
    .title {
      font-size: 27rpx;
      line-height: 32rpx;
      color: var(--color1);
      @include text-clamp(2);
    }
    .specs {
      margin-top: 12rpx;
      font-size: 23rpx;
      line-height: 27rpx;
      color: var(--color4);
    }
    .price-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .score {
        display: flex;
        align-items: center;
        .num {
          font-size: 30rpx;
          font-weight: 700;
          line-height: 1;
          color: #ffaa00;
          &::after {
            font-size: 25rpx;
            font-weight: 500;
            color: var(--color3);
            content: '分';
          }
        }
        .text {
          margin-left: 4rpx;
          font-size: 23rpx;
          color: var(--color3);
        }
      }
      .price {
        font-size: 38rpx;
        font-weight: 700;
        line-height: 45rpx;
        color: var(--color1);
        &::before {
          display: inline-block;
          font-size: 22rpx;
          content: '￥';
        }
      }
    }
  }
}
</style>
